<template>
  <div>
    <ul class="oul">    
        <!-- :key  唯一值 -->
        <li :class="{ active: count === index }"
             v-for="(item, index) in list"
             @click="changeCount(index)"
             :key="index">
            {{ item }}
        </li>
    </ul>

    <Admin v-show="count === 0"/>
    <Pub v-show="count === 1"/>
    
  </div>
</template>

<script>
import Pub from './Pub.vue'
import Admin from './Admin.vue'
export default {
    components: {
        Pub,
        Admin
    },
    data() {
        return {
            count: 1,
            list: ["评论管理", "发布评论"]
        }
    },
    methods: {
        changeCount(index) {
            this.count = index
        }
    }
}
</script>

<style>
    .oul {
        display: flex;
        text-align: center;
        line-height: 40px;
    }

    .oul li {
        flex: 1
    }
    .active {
        background: skyblue;
    }
</style>